<template>
	<!--index.wxml-->
	<view>
		<view>
		<view class="container" style="background-color: #00aa00;">
			<view class="bg-sear">
				<view class="scrolltop">
					<view class="section" @tap="toSearchPage">
						<image src="/static/images/icon/search.png" class="search-img"></image>
						<text class="placeholder">搜索</text>
					</view>
				</view>
			</view>

			<view class="content">
				<!-- swiper -->
				<swiper :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration"
					:indicator-active-color="indicatorActiveColor + ' '" circular="true" class="pic-swiper"
					indicator-dots previous-margin="20rpx" next-margin="20rpx">
					<block v-for="(item, index) in indexImgs" :key="index">
						<swiper-item class="banner-item">
							<view class="img-box">
								<image :src="item.imgUrl" :data-prodid="item.relation" @tap="toProdPage" class="banner">
								</image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<!-- end swiper -->
				<!-- 消息播放 -->
				<view class="cat-item">

					<button type="default" @tap="tapPopup" style="width: 100%;background-color: #00aa00;height:80%;">
						<image src="/static/images/icon/dama.png"
							style="height: 50px;width: 50px; display: block; margin: auto;">

						</image>
						<text style="color: #ffffff;">显示主体码</text>
					</button>
					<view class="popup" v-show="show">
						<view class="popup-info">
							<view>
								<vue-qr :bgSrc='src' :logoSrc="src2"
									text="http://rb347gnll.hn-bkt.clouddn.com/2022/04/75c005da5a9f480184bfcacecabac1b6.jpeg"
									:size="200"></vue-qr>
							</view>
							<view class="popup-btn">

								<view><button type="default" class="affirm" @tap="affirm">确认</button></view>
							</view>
						</view>
					</view>

				</view>

				<view class="cat-item">
					<view class="item" @tap="toOrderListPage" data-sts="2">
						<button style="height: auto;width: 80%;display: flex;text-size-adjust: 100%; background-color: #ffffff;" @tap="toProdPage"
							data-sts="3" >
							<view class="item">
								<image src="/static/images/icon/chuku.png"></image>
								<view style="font-size: 15px;align-items: center;display: block">待开票据</view>
							</view>
						</button>
					</view>
					<view class="item">
						<button style="height: auto;width: 80%;display: flex;text-size-adjust: 100%; background-color: #ffffff" @tap="toCategory">
							<view class="item">
								<image src="/static/images/icon/ruku.png"></image>
								<view style="font-size: 15px;align-items: center;display: block">零售开单</view>
							</view>
						</button>
					</view>
				</view>
				<view class="cat-item">
					<view class="item">
						<button style="height: auto;width: 80%;display: flex;text-size-adjust: 100%; background-color: #ffffff" @tap="toBasket">
							<view class="item">
								<image src="/static/images/icon/chuku.png"></image>
								<view style="font-size: 15px;align-items: center;display: block">零售订单</view>
							</view>
						</button>
					</view>
					<view class="item">
						<button style="height: auto;width: 80%;display: flex;text-size-adjust: 100%; background-color: #ffffff">
							<view class="item" @tap="toCouponCenter">
								<image src="/static/images/icon/ruku.png"></image>
								<view style="font-size: 15px;align-items: center;display: block">收入明细</view>
							</view>
						</button>
					</view>
				</view>

			</view>
			<view class="cat-item">
				<view class="item"><button style="height: auto;width: 80%;display: flex;text-size-adjust: 100%; background-color: #ffffff">
						<view class="item" @tap="toClassifyPage" data-sts="1">
							<image src="/static/images/icon/ruku .png"></image>
							<view style="font-size: 15px;align-items: center;display: block">门店客户</view>
						</view>
					</button>

				</view>
				<view class="item"><button style="height: auto;width: 80%;display: flex;text-size-adjust: 100%; background-color: #ffffff">
						<view class="item" @tap="toClassifyPage" data-sts="1">
							<image src="/static/images/icon/kehu.png"></image>
							<view style="font-size: 15px;align-items: center;display: block">我的余额</view>
						</view>
					</button>

				</view>
			</view>
			<view class="cat-item">
				<view class="item">
					<button style="height: auto;width: 80%;display: flex;text-size-adjust:100%; background-color: #ffffff">
						<view class="item" @tap="toClassifyPage" data-sts="3">
							<image src="/static/images/icon/kehu.png"></image>
							<view style="font-size: 15px;align-items: center;display: block">我的账号</view>
						</view>
					</button>
				</view>
				<view class="item">
					<button style="height: auto;width: 80%;display: flex;text-size-adjust: 100%; background-color: #ffffff">
						<view class="item" @tap="toCouponCenter">
							<image src="/static/images/icon/kehu.png"></image>
							<view style="font-size: 15px;align-items: center;display: block">更多功能</view>
						</view>
					</button>
				</view>
			</view>




		</view>

		<view class="updata" v-if="updata">
			<block v-for="(item, index) in taglist" :key="index">
				<!-- 每日上新 -->
				<view class="up-to-date" v-if="item.style==2 && item.prods && item.prods.length">
					<view class="title">
						<text>{{item.title}}</text>
						<view class="more-prod-cont" @tap="toClassifyPage" data-sts="0" :data-id="item.id"
							:data-title="item.title">
							<text class="more">查看更多</text>
							<!-- <text class='arrow'></text> -->
						</view>
					</view>		
				</view>
				<!-- 更多宝贝 -->
				<view class="more-prod" v-if="item.style==0 && item.prods && item.prods.length">
					<view class="title">{{item.title}}</view>
					<view class="prod-show">
						<block v-for="(prod, index2) in item.prods" :key="index2">
							<view class="show-item" @tap="toProdPage" :data-prodid="prod.prodId">
								<view class="more-prod-pic">
									<image :src="prod.pic" class="more-pic"></image>
								</view>
								<view class="prod-text-right">
									<view class="prod-text more">{{prod.prodName}}</view>
									<view class="prod-info">{{prod.brief}}</view>
									<view class="b-cart">
										<view class="price">
											<text class="symbol">￥</text>
											<text class="big-num">{{wxs.parsePrice(prod.price)[0]}}</text>
											<text class="small-num">.{{wxs.parsePrice(prod.price)[1]}}</text>
										</view>
										<!-- <view class='go-to-buy'>立即购买</view> -->
										<image src="/static/images/tabbar/basket-sel.png" class="basket-img"></image>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</block>
		</view>
		
	</view>
	<view style="text-align: center;padding:10px;background-color: #ffffff;margin: 100px,0px,0px,0px;">
	<uni-grid :column="3" :showBorder="false"  :square="false" :highlight="true" >
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;margin: 100px,0px,0px,0px;">
			{{}}
			</view>
		</uni-grid-item>	
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;margin: 100px,0px,0px,0px;">
				0
			</view>
		</uni-grid-item>
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;margin: 100px,0px,0px,0px;">
				0
			</view>
		</uni-grid-item>
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;">
				今日收入
			</view>
		</uni-grid-item>
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;">
				本日订单
			</view>
		</uni-grid-item>
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;">
			本月订单
		</view>
		</uni-grid-item>
	</uni-grid>
	</view>
	<view style="text-align: center;padding:10px;background-color: #ffffff;margin: 100px,0px,0px,0px;">
	<uni-grid :column="3" :showBorder="false"  :square="false" :highlight="true" >
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;margin: 100px,0px,0px,0px;">
			0
			</view>
		</uni-grid-item>	
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;margin: 100px,0px,0px,0px;">
				0
			</view>
		</uni-grid-item>
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;margin: 100px,0px,0px,0px;">
				
			</view>
		</uni-grid-item>
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;">
				零售商数量
			</view>
		</uni-grid-item>
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;">
				累计销售
			</view>
		</uni-grid-item>
		<uni-grid-item>
			<view class="text" style="text-align: center;padding:10px;background-color: #ffffff;">
			
		</view>
		</uni-grid-item>
	</uni-grid>
	</view>
	</view></view>	
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
	//index.js
	//获取应用实例
	var http = require("../../utils/http.js");
	var config = require("../../utils/config.js");
	import vueQr from 'vue-qr'
	import swGrid from '@/components/sw-grid/sw-grid.vue'
	const app = getApp();
	//提示：如果点击某项，不进行跳转页面，那么请添加type属性为click

 

	export default {
		data() {
			return {
				totalprice:0,
				downloadData: {
					url: 'http://www.baidu.com',
					icon: '../static/icon/ruku.png'

				},
				show: false,
				indicatorDots: true,
				indicatorColor: '#d1e5fb',
				indicatorActiveColor: '#1b7dec',
				autoplay: true,
				interval: 2000,
				duration: 1000,
				indexImgs: [],
				seq: 0,
				news: [],
				taglist: [],
				sts: 0,
				scrollTop: "",
				current: 0,
				updata: true
			};
		},

		components: {
			vueQr,
			swGrid,
		},
		props: {},
		onLoad: function() {
			this.getAllData();
			this.getBiaoshuju();
		},
		onShow: function() {
			//#ifdef MP-WEIXIN
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.userInfo']) {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				}
			});
			//#endif
			http.getCartCount(); //重新计算购物车总数量
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		// onPullDownRefresh: function () {
		//     wx.request({
		//       url: '',
		//       data: {},
		//       method: 'GET',
		//       success: function (res) { },
		//       fail: function (res) { },
		//       complete: function (res) {
		//         wx.stopPullDownRefresh();

		//       }
		//     })
		// },
		
		onPullDownRefresh: function() {
			// wx.showNavigationBarLoading() //在标题栏中显示加载
			//模拟加载
			var ths = this;
			setTimeout(function() {
				ths.getAllData(); // wx.hideNavigationBarLoading() //完成停止加载

				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 100);
		},
		methods: {
			created: function() {
						// 4.最开始就运行这个程序，就是计算器
						this.counter();
					},

			getBiaoshuju(current,i){
				this.loadOrderData(sts,current);
				i=0;
				this.totalprice=0;
				
				for(let g of this.current){
					list.data[0]+=i;
					i=this.current;
					
				}
				
			},
		loadOrderData: function (sts, current) {
      var ths = this;
      uni.showLoading(); //加载订单列表

      var params = {
        url: "/p/myOrder/myOrder",
        method: "GET",
        data: {
          current: current,
          size: 10,
          status: sts
        },
        callBack: function (res) {
          //console.log(res);
          var list = [];

          if (res.current == 1) {
            list = res.records;
          } else {
            list = ths.list;
            Array.prototype.push.apply(list, res.records);
          }

          ths.setData({
            list: list,
            pages: res.pages,
            current: res.current
          });
          uni.hideLoading();
        }
      };
      http.request(params);
    },
	
			test(dataUrl, id) {
				console.log(url, id)
			},

			// 弹窗
			tapPopup() {
				this.show = true;
			},
			// 点击弹窗取消
			cancel() {
				this.show = false;
			},
			// 点击弹窗确认
			affirm() {
				this.show = false;
			},
			//事件处理函数
			bindViewTap: function() {
				uni.navigateTo({
					url: '../logs/logs'
				});
			},
			// 页面滚动到指定位置指定元素固定在顶部
			onPageScroll: function(e) {
				//监听页面滚动
				this.setData({
					scrollTop: e.scrollTop
				});
			},
			toProdPage: function(e) {
				var prodid = e.currentTarget.dataset.prodid;

				if (prodid) {
					uni.navigateTo({
						url: '/pages/prod/prod?prodid=' + prodid
					});
				}
			},
			toOrderListPage: function(e) {
				var sts = e.currentTarget.dataset.sts;
				uni.navigateTo({
					url: '/pages/orderList/orderList?sts=' + sts
				});
			},
			toCouponCenter: function() {
				uni.showToast({
					icon: "none",
					title: '该功能未开源'
				});
			},
			// 跳转搜索页
			toSearchPage: function() {
				uni.navigateTo({
					url: '/pages/search-page/search-page'
				});
			},
			toCategory: function() {
				console.log("category")
				uni.redirectTo({
					url: '/pages/category/category'
				});
			},
			toBasket: function() {
				console.log("basket")
				uni.redirectTo({

					url: '/pages/basket/basket'

				});
			},
			//跳转商品活动页面
			toClassifyPage: function(e) {
				var url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts;
				var id = e.currentTarget.dataset.id;
				var title = e.currentTarget.dataset.title;

				if (id) {
					url += "&tagid=" + id + "&title=" + title;
				}

				uni.navigateTo({
					url: url
				});
			},
			//跳转公告列表页面
			onNewsPage: function() {
				uni.navigateTo({
					url: '/pages/recent-news/recent-news'
				});
			},

			getAllData() {
				http.getCartCount(); //重新计算购物车总数量

				this.getIndexImgs();
				this.getNoticeList();
				this.getTag();
			},

			//加载轮播图
			getIndexImgs() {
				//加载轮播图
				var params = {
					url: "/indexImgs",
					method: "GET",
					data: {},
					callBack: res => {
						this.setData({
							indexImgs: res,
							seq: res
						});
					}
				};
				http.request(params);
			},

			getNoticeList() {
				// 加载公告
				var params = {
					url: "/shop/notice/topNoticeList",
					method: "GET",
					data: {},
					callBack: res => {
						this.setData({
							news: res
						});
					}
				};
				http.request(params);
			},

			// 加载商品标题分组列表
			getTag() {
				var params = {
					url: "/prod/tag/prodTagList",
					method: "GET",
					data: {},
					callBack: res => {
						this.setData({
							taglist: res
						});
						for (var i = 0; i < res.length; i++) {
							this.updata = false
							this.updata = true
							this.getTagProd(res[i].id, i);
						}
						console.log('taglist:', this.taglist)
					}
				};
				http.request(params);
			},
           
			getTagProd(id, index) {
				var param = {
					url: "/prod/prodListByTagId",
					method: "GET",
					data: {
						tagId: id,
						size: 6
					},
					callBack: res => {
						this.updata = false
						this.updata = true
						var taglist = this.taglist;
						taglist[index].prods = res.records;
						this.setData({
							taglist: taglist
						});
					}
				};
				http.request(param);
			},

			/**
			 * 跳转至商品详情
			 */
			showProdInfo: function(e) {
				let relation = e.currentTarget.dataset.relation;

				if (relation) {
					uni.navigateTo({
						url: 'pages/prod/prod'
					});
				}
			}
		}
	};
</script>
<style>
	@import "./index.css";
</style>
